<template>
  <BasicModal
    :destroy-on-close="true"
    :footer="null"
    width="60%"
    @cancel="handleCancel"
    title="数据模型详情"
    @register="registerModal"
  >
    <Description
      :label-style="{ width: '150px' }"
      :content-style="{ width: '150px' }"
      :title="schema.label as string"
      :key="schema.field"
      v-for="schema in descSchemas"
      :schema="schema.children || []"
      :data="currentRecord"
      :column="24"
      class="desc-card"
    />
  </BasicModal>
</template>
<script setup lang="ts">
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { Description, DescItem } from '@/components/Description/index';
  import { devSchemaDetail } from '@/api/dev/schema';
  import { ref } from 'vue';
  import { formSchemas } from './schemas';
  import { formToDescription } from '@/utils/schema_util';

  const descSchemas = ref<Array<DescItem>>(formToDescription(formSchemas, {}));
  const currentRecord = ref<any>();
  const [registerModal] = useModalInner((data) => {
    devSchemaDetail({
      id: data.record.id,
    }).then((data) => {
      descSchemas.value = formToDescription(formSchemas, data);
      currentRecord.value = data;
    });
  });
  const handleCancel = () => {
    currentRecord.value = undefined;
  };
</script>
<style scoped lang="less">
  @import '/@/assets/styles/common-detail.less';
</style>
